<template>
    <div id="validatebox" class="valBox">
        <div class="validatedialog">
            <div class="dialogHeader">
                安全验证
                <div class="dialogRefresh">
                    <img src="../../static/validate/refresh.png">
                </div>
            </div>
            <div class="dialogBody">
                <div class="bigImg">
                    <img src="../../static/validate/bigImg.jpg" @click="getCoord($event)" class="loginImg">
                    <img src="../../static/validate/pop.png" class="clickIcon loginImg">
                    <img src="../../static/validate/regImg.jpg" class="regImg">
                </div>
                <div class="smallImg">
                    <div class="txt">请点击上图中的：{{userId}}</div>
                    <div class="rightImg loginImg">
                        <div>
                            <img src="../../static/validate/smallImg.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data(){
        return {
            
        }
    },
    props:['userId'],
    methods:{
        getCoord(e){
            var positionX=e.pageX-$(e.target).offset().left; //获取当前鼠标相对img的X坐标  
            var positionY=e.pageY-$(e.target).offset().top; //获取当前鼠标相对img的Y坐标  
            $('.clickIcon').css({
                display:'block',
                left:Number(positionX)-10+'px',
                top:Number(positionY)-15+'px'
            });
            if(positionX>=163&&positionX<=186&&positionY>=13&&positionY<=33){
                setTimeout(()=>{
                    $('#validatebox').css('display','none');
                    this.$router.push('/my/'+this.userId);
                },1000);
            }else{
                $('.smallImg .txt').html('验证错误请重试').css('color','#f23030');
            }
        },
    }
}
</script>

<style scoped lang='scss'>
.valBox {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    .validatedialog {
        position: absolute;
        width: 84%;
        top: 50%;
        right: 8%;
        z-index: 9999;
        background: #f8f8f8;
        border-radius: 9px;
        font-family: Calibri;
        line-height: normal;
        transform: translateY(-50%);
        .dialogHeader {
            font-size: 40px;
            color: #333;
            text-align: center;
            line-height: 105px;
            .dialogRefresh {
                position: fixed;
                top: 10px;
                right: 23px;
                img {
                    width: 46px;
                }
            }
        }
        .dialogBody {
            padding: 0 23px;
            .bigImg {
                position: relative;
                height: 340px;
                img {
                    width: 100%;
                }
                .clickIcon {
                    display: none;
                    width: 46px;
                    vertical-align: top;
                    padding-top: 0;
                    position: absolute;
                }
            }
            .smallImg {
                margin: 23px 0;
                height: 84px;
                display: flex;
                .txt {
                    text-align: left;
                    width: 53%;
                    font-size: 35px;
                    height: 100%;
                    line-height: 84px;
                    display: inline-block;
                    vertical-align: top;
                    color: #333;
                }
                .rightImg {
                    width: 47%;
                    line-height: 84px;
                    vertical-align: top;
                    height: 100%;
                    div {
                        text-align: right;
                        width: 100%;
                        display: inline-block;
                        height: 84px;
                        position: relative;
                        img {
                            height: 100%;
                            vertical-align: top;
                        }
                    }
                }
            }
        }
    }
}

.regBox {
    .loginImg {
        display: none;
    }
    .regImg {
        display: block;
    }
    #canBox {
        display: block;
    }
}

.loginBox {
    .loginImg {
        display: block;
    }
    .regImg {
        display: none;
    }
    #canBox {
        display: none;
    }
}
</style>
